import React from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons";
import { Button, Layout, Avatar, Dropdown } from "antd";
import { useDispatch } from "react-redux";
import { collapseMenu } from '../../store/reducers/tab'
import './index.css'


const { Header } = Layout;

const CommonHeader = ({ collapsed }) => {
  const logout = () => { }
  const items = [
    {
      key: "1",
      label: (
        <a target="_blank">个人中心</a>
      )
    },
    {
      key: "2",
      label: (
        <a target="_blank" onClick={() => logout}>退出</a>
      )
    }
  ]

  const dispatch = useDispatch()

  const setCollapsed = () => {
    dispatch(collapseMenu())
  }
  return (
    <Header className="header-container"
    // style={{
    //   padding: 0,
    //   background: colorBgContainer,
    // }}
    >
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed()}
        style={{
          fontSize: "16px",
          width: 64,
          height: 32,
          backgroundColor: '#fff'
        }}
      />
      <Dropdown menu={{ items }}>
        <Avatar src={<img alt="" src={require("../../assets/images/user.jpg")} />} />
      </Dropdown>
    </Header>
  );
};

export default CommonHeader;
